<template>
  <div id="debtorindex">
    <c-title :hide="false" text="债务人"></c-title>
    <div class="topHead">
      <div class="userbox">
        <div class="img" v-if="info.member">
          <img :src="info.member.avatar" alt="" />
        </div>
        <div class="userName" v-if="info.member">{{ info.member.nickname }}</div>
      </div>
      <div class="listBox">
        <div class="listL" v-for="(item, index) in shoplist" :key="index">
          <div class="price">
            <div class="txt">
              <div class="ptxt" v-if="index != 2">{{ $i18n.t("money") }}</div>
              {{ item.price }}
            </div>
          </div>
          <div class="txtA">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="contenBox">
      <div
        v-for="(item, index) in nume"
        :key="index"
        class="contenBox_nume"
        @click="tourl(item)"
      >
        <i
          class="iconfont"
          :class="item.icon"
          :style="{ color: item.color }"
        ></i>
        <div class="name">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      info: [],
      shoplist: [
        {
          name: "采购金",
          price: "0.00",
        },
        {
          name: "网店收入",
          price: "0.00",
        },
        {
          name: "已完成订单数",
          price: "0.00",
        },
        {
          name: "累计订单金额",
          price: "0.00",
        },
      ],
      nume: [
        {
          icon: "icon-fontclass-dianpu1",
          color: "#fd6154",
          name: "进入店铺",
        },
        {
          icon: "icon-fontclass-erweima",
          color: "#0ed79b",
          name: "店铺二维码",
        },
        {
          icon: "icon-fontclass-huiyuandengji",
          color: "#ff961f",
          name: "会员管理",
        },
        {
          icon: "icon-fontclass-shangpindingdan",
          color: "#22a6ff",
          name: "网店订单",
        },
        {
          icon: "icon-fontclass-shangpindingdan",
          color: "#22a6ff",
          name: "采购订单",
        },
        {
          icon: "icon-fontclass-tichengmingxi",
          color: "#8562e6",
          name: "采购金明细",
        },
        {
          icon: "icon-fontclass-shenhe1",
          color: "#fd6154",
          name: "售后审核",
        },
        {
          icon: "icon-fontclass-wdeguanzhu",
          color: "#11da9f",
          name: "债务人申请",
        },
      ],
      debtor_id: "",
    };
  },
  activated() {
    this.getData();
    // this.getUser();
  },
  methods: {
    tourl(item) {
      console.log(item.name);
      let name = item.name;
      if (name == "进入店铺") {
        if(!this.debtor_id){
          Toast('你还不是债务人或者债务人身份已过期')
          return
        }
        this.$router.push(
          this.fun.getUrl("debtorShop", { kid: this.debtor_id, member_type: 2 })
        );
      } else if (name == "店铺二维码") {
        this.$router.push(this.fun.getUrl("debtShopCode", {}));
      } else if (name == "会员管理") {
        this.$router.push(this.fun.getUrl("userManagement", { type: 2 }));
      } else if (name == "网店订单") {
        this.$router.push(
          this.fun.getUrl("debtOrder", { status: 0, member_type: 4 })
        );
      } else if (name == "采购订单") {
        this.$router.push(
          this.fun.getUrl("debtOrder", { status: 0, member_type: 2 })
        );
      } else if (name == "采购金明细") {
        this.$router.push(this.fun.getUrl("purchaseDetails", {}));
      } else if (name == "售后审核") {
        this.$router.push(this.fun.getUrl("debtorAudit", {}));
      } else if (name == "债务人申请") {
        this.$router.push(this.fun.getUrl("debtapply", { type: 2 }));
      }
    },

    getData() {
      $http
        .get(
          "plugin.debt-shop.frontend.debt-member.getDebtData",
          { member_type: 2 },
          "加载中"
        )
        .then((res) => {
          if (res.result === 1) {
            this.info = res.data;
            this.shoplist.forEach((ele, index) => {
              console.log(ele.name);
              if (ele.name == "采购金") {
                ele.price = this.info.debtor_credit;
              } else if (ele.name == "网店收入") {
                ele.price = this.info.sum_debtor_income;
              } else if (ele.name == "已完成订单数") {
                ele.price = this.info.order_count;
              } else if (ele.name == "累计订单金额") {
                ele.price = this.info.order_price;
              }
            });
            this.debtor_id = res.data.default_debtor_id;
          } else {
            Toast(res.msg);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
#debtorindex {
  min-height: 100vh;
  background: #fff;
}

.contenBox {
  padding: 2rem 0;
  display: flex;
  flex-wrap: wrap;

  .contenBox_nume {
    margin-bottom: 1.88rem;
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .iconfont {
      font-size: 2.2rem;
      margin-bottom: 0.25rem;
    }

    .name {
      font-size: 0.75rem;
      color: #636262;
    }
  }
}

.topHead {
  width: 100%;
  height: 10.31rem;
  background-image: url("../../../assets/images/debt/debtb1.png");
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .listBox {
    margin-bottom: 1.03rem;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .listL {
      flex: 1;
      overflow: hidden;
      color: #fff;

      .price {
        width: 100%;
        justify-content: center;
        display: flex;
        align-items: center;

        .txt {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 1rem;

          .ptxt {
            font-size: 0.63rem;
            display: inline-block;
          }
        }
      }
    }

    .txtA {
      width: 100%;
      text-align: center;
      font-size: 0.75rem;
    }
  }

  .userbox {
    margin-top: 1.41rem;
    display: flex;
    margin-left: 1.05rem;

    .img {
      width: 3.56rem;
      height: 3.56rem;
      background-color: #fff;
      border-radius: 100%;
      margin-right: 0.66rem;

      img {
        width: 100%;
        height: 100%;
        border-radius: 100%;
      }
    }

    .userName {
      margin-top: 0.56rem;
      font-size: 1.06rem;
      color: #fff;
    }
  }
}
</style>
